<template>
  <div :style="{ color: '#fcc', margin: '5px' }">
    我是子组件
    <div>我是父亲传递过来值：{{ count }}</div>
    <div>我是传递过来的数组:{{ arr }}</div>
    <div>子的值：{{ zizhi }}</div>
    <div>
      我是子转父的按钮
      <button @click="sendToParent">子传父按钮</button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, defineComponent, ref } from 'vue'
// const props = defineProps(['count', 'arr'])
const zizhi = ref(20)
// 另一种写法  组合写法
const props = defineProps({
  count: Number,
  arr: Object
})
const emit = defineEmits(['sendToParent', 'delete'])
const sendToParent = () => {
  emit('sendToParent', zizhi.value)
  emit('delete', props.count)
}
console.log(props)
//暴露的方法
const expostval = (val) => {
  console.log(val)
  //暴露方法  val是父亲传递的值
  zizhi.value = val
}

defineExpose({ expostval, sendToParent })
//子传父的方法

// 另一种写法  组合式写法
// export default defineComponent({
//   props: {
//     count: Number,
//     arr: Object
//   },
//   setup(props, { emit }) {
//     const sendToParent = () => {
//       console.log('进来了')
//       emit('sendToParent', '1111')
//     }
//     return {
//       sendToParent
//     }
//   }
// })
</script>

<style lang="scss" scoped>
</style>